import Loading from "@/components/common/Loading.vue";
import { createApp } from "vue";

const createLoading = (el: HTMLElement) => {
  if (el.querySelector("[data-v_loading]")) return;
  const loading = createApp(Loading);
  el.style.position = "relative";
  const fragment: any = document.createDocumentFragment();
  loading.mount(fragment);
  el.appendChild(fragment);
};
const destoryLoading = (el: HTMLElement) => {
  const loading = el.querySelector("[data-v_loading]");
  if (!loading) return;
  el.removeAttribute("style");
  el.removeChild(loading);
};
export default {
  mounted(el: HTMLElement, binding) {
    if (!binding.value) {
      destoryLoading(el);
    } else {
      createLoading(el);
    }
  },
  updated(el: HTMLElement, binding) {
    if (binding.value == binding.oldValue) return;
    if (!binding.value) {
      destoryLoading(el);
    } else {
      createLoading(el);
    }
  }
};
